<template>
  <div class="register-mobile">
    <div v-if="currentsStep<3">
      <div class="logo">
        <img alt="" src="../images/logo-icon.png">
      </div>
      <div class="step-list">
        <div class="step-box">
          <div v-for="(item , index) in stepList" :key="index" class="step-li">
            <div class="pic-box">
              <div :class="[currentsStep >=item.step ? 'active' : '']" class="pic" :style="{scale: stepList[currentsStep]['scale'][index]}"><img :src="item.img" alt="" class="step-pic"></div>
            </div>
            <div :class="[currentsStep ===item.step ? 'active' : '']" class="text">{{ item.name }}</div>
          </div>
        </div>
      </div>
      <div class="desc">{{stepList[currentsStep].desc}}</div>
    </div>
    <div class="content">
      <el-form ref="editForm" :model="editForm">
        <div v-if="currentsStep === 0" class="select-row">
          <div
            :class="[
                    'select-item',
                    editForm.roleType === 1 ? 'active' : ''
                  ]"
            @click="changeSelectType(1)"
          >
            <div class="item-box">
              <div class="chengyunshang"></div>
            </div>
            <div class="item-text">我是承运商</div>
          </div>
          <div
            :class="[
                    'select-item',
                    editForm.roleType === 2 ? 'active' : ''
                  ]"
            @click="changeSelectType(2)"
          >
            <div class="item-box">
              <div class="huozhu"></div>
            </div>
            <div class="item-text">我是货主企业</div>
          </div>
        </div>
        <div v-if="currentsStep === 1" class="phone-valid">
          <div class="second-form">
            <el-form-item
              :rules="[{ required: true, message: '请输入手机号' }]"
              label=""
              prop="signPhone"
            >
              <el-input
                v-model="editForm.signPhone"
                class="inputFund"
                clearable
                maxlength="11"
                placeholder="请输入手机号"
                type="number"
              ></el-input>
            </el-form-item>
            <el-form-item class="second-item" label="" prop="isPassing">
              <drag-verify
                ref="dragVerify"
                :circle="true"
                :height="50"
                :isPassing.sync="editForm.isPassing"
                :width="300"
                background="#ff0000"
                handlerIcon="el-icon-d-arrow-right"
                progressBarBg="#79c23d"
                successIcon="el-icon-circle-check"
                successText="验证通过"
                text="右滑解锁"
                textColor="#fff"
                type="round"
                @passcallback="passcallback"
              >
              </drag-verify>
            </el-form-item>
            <el-form-item
              :rules="[{ required: true, message: '请输入验证码' }]"
              class="second-item"
              label=""
              prop="messageCode"
            >
              <div class="code-box">
                <el-input
                  v-model="editForm.messageCode"
                  :disabled="!hasSendCode"
                  class="inputFund"
                  clearable
                  maxlength="20"
                  placeholder="请输入验证码"
                  type="number"
                ></el-input>
                <el-button
                  :disabled="
                          countdown > 0 ||
                            !editForm.isPassing ||
                            editForm.signPhone == ''
                        "
                  class="item-button"
                  @click="sendCode"
                >
                  {{
                    countdown > 0
                      ? `${countdown}秒后重新获取`
                      : "获取验证码"
                  }}
                </el-button>
              </div>
            </el-form-item>
            <el-form-item
              class="second-item"
              label=""
              prop="invitationCode"
            >
              <el-input
                v-model="editForm.invitationCode"
                class="inputFund"
                clearable
                maxlength="8"
                placeholder="请输入8位数字邀请码 (可不填)"
              ></el-input>
            </el-form-item>
          </div>
        </div>
        <div v-if="currentsStep===2" class="phone-valid">
          <div class="second-form">
            <el-form-item
              label=""
              prop="corpName"
              class="second-item"
              :rules="[{ required: true, message: '请输入企业名称' }]"
            >
              <el-input
                maxlength="40"
                placeholder="请输入企业名称"
                clearable
                v-model="editForm.corpName"
              ></el-input>
            </el-form-item>
            <el-form-item
              label=""
              prop="webgisPassword"
              :rules="[
                    { required: true, message: '请输入登陆密码' },

                  ]"
              class="second-item"
            >
              <el-input
                show-password
                maxlength="15"
                placeholder="请设置8-20位数字和字母组合登陆密码"
                clearable
                v-model="editForm.webgisPassword"
                type="password"
              ></el-input>
            </el-form-item>
            <el-form-item
              label=""
              prop="confirmPassword"
              :rules="[
                    { required: true, message: '请输入确认密码' },
                    {
                      validator: (rules, value, cb) =>
                        confirmPwdValidator(
                          rules,
                          value,
                          cb,
                          editForm.webgisPassword
                        )
                    }
                  ]"
              class="second-item"
            >
              <el-input
                show-password
                maxlength="15"
                placeholder="请确认登录密码"
                clearable
                v-model="editForm.confirmPassword"
                type="password"
                style="margin-bottom: 0;"
              ></el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <div v-if="currentsStep===1" class="step1-bottom">
        <div class="check-con">
          <el-checkbox></el-checkbox>
          <span class="agree">我已同意</span>
          <span class="link">《瓮福指挥物流平台服务协议》</span>
        </div>
        <div class="next-btn">下一步</div>
      </div>
      <div v-if="currentsStep===2" class="step1-bottom">
        <div class="next-btn" style="margin-top: 20px;">完成</div>
      </div>
      <div class="success-con" v-if="currentsStep===3">
        <div>
          <div class="center">
            <img src="../images/success.png" alt="">
          </div>
          <div class="center text">企业认证成功！</div>

          <div class="slogan">
            <div class="left-row" v-for="item in successList" :key="item.title">
              <div class="center"><img alt="" class="img" :src="item.icon"></div>
              <div class="text-box">
                <div class="big-text">{{item.title}}</div>
                <div class="s-text">{{item.desc}}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
<!--      <button @click="left">左侧按钮</button>-->
<!--      <button @click="right">右侧按钮</button>-->
    </div>
    <MobileNotice ref="mobileNoticeRef" @handleStep1="handleStep1"></MobileNotice>
  </div>
</template>

<script>
import MobileNotice from './mobileNotice.vue'
import dragVerify from '@/views/register/components/dragVerify.vue'
const stepList = [
  {
    step: 0,
    name: '角色选择',
    img: require("../images/step1.png"),
    scale:[1,0.75,0.6],
    desc:'为了便于我们服务，请选择您的所属角色'
  },
  {
    step: 1,
    name: '验证手机',
    img: require("../images/step2.png"),
    scale:[0.75, 1,0.6],
    desc:'为了便于我们服务，请验证您的手机'
  },
  {
    step: 2,
    name: '账户信息',
    img: require("../images/step3.png"),
    scale:[0.6,0.75,1],
    desc:'为了便于我们服务，请填写您的账户信息'
  },


]
const successList = [
  {
    icon:require('../images/icon1.png'),
    title:'稳定',
    desc:'大企货源，稳定量大'
  },
  {
    icon:require('../images/icon2.png'),
    title:'公正',
    desc:'运价公正，透明竞争'
  },
  {
    icon:require('../images/icon3.png'),
    title:'保障',
    desc:'资金保障，结算快速'
  }
 ]
export default {
  components:{dragVerify, MobileNotice},
  data () {
    return {
      stepList:stepList,
      successList:successList,
      currentsStep:0,
      editForm: {
        roleType: null,
        signPhone: "",
        messageCode: "",
        confirmPassword: "",
        invitationCode: "",
        corpName: "",
        webgisPassword: "",
        isPassing: false
      },
    }
  },
  methods:{
    left(){
      let dom = document.querySelector('.step-box')
      let item=document.querySelector('.step-li')
      let {width}=window.getComputedStyle(item)
      let a=window.getComputedStyle(dom)
      dom.style.transform =`translateX(calc(${window.getComputedStyle(dom).left} - ${width}))`
      this.currentsStep++
    },
    right(){
      let dom = document.querySelector('.step-box')
      let item=document.querySelector('.step-li')
      let {width}=window.getComputedStyle(item)
      dom.style.transform =`translateX(calc(${window.getComputedStyle(dom).left} + ${width}))`
      this.currentsStep--
    },
    changeSelectType(type){
      this.editForm.roleType = type;
      this.$refs.mobileNoticeRef.open()
    },
    handleStep1(val){
      if (val) {
        this.left()
      } else {
        this.editForm.roleType = null;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.register-mobile {
  width: 100%;
  //height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .logo {
    height: 36px;
    text-align: center;
    margin-top: 20px;

    img {
      height: 100%;
    }
  }
  .step-list{
    position: relative;
    height: 150px;
    display: flex;
    flex-direction: column;
    margin: 20px 0;
    overflow: hidden;
    .step-box{
      width: 100%;
      height: 150px;
      display: flex;
      --img-width: 77px;
      //position: absolute;
      transition: all 0.5s;
      transform: translateX(calc(100% / 3));
      left: calc(100% / 3);
      .step-li{
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        .pic-box{
          display: flex;
          justify-content: center;
          align-items: center;
          height: 80%;
        }
        .pic {
          width: var(--img-width);
          height: var(--img-width);
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          background-color: rgba(238, 18, 27, 0.1);

          &.active {
            background-color: rgba(238, 18, 27, 0.2);
          }
        }
        .text {
          color: rgba(0, 12, 62, .5);
          font-size: 16px;
          font-weight: bold;
          display: none;
          &.active {
            color: rgba(0, 12, 62, 1);
            display: block;
          }
        }
      }
    }

  }
  .desc{
    color: #9FA0A5;
    text-align: center;
    margin-bottom: 16px;
  }
  .content{
    flex: 1;
    .select-row{
      margin-top: 100px;
      display: flex;
      justify-content: space-between;
      .select-item {
        margin: 20px ;
        padding: 10px;
        flex: 1;
        height: 115px;
        border-radius: 10px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        background: #fff;
        box-sizing: border-box;
        box-shadow: 0 0 15px 10px rgba(255, 221, 223, 0.5);
        .item-box{
          flex: 1;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
        }
        .chengyunshang{
          width: 90%;
          height: 100%;
          background: url("../images/chengyunshang.png") no-repeat;
          background-size: 100%;
        }
        .huozhu{
          width: 90%;
          height: 90%;
          background: url("../images/huozhu.png") no-repeat;
          background-size: 100%;
        }
        &.active {
          border: 2px solid #EE121B;
        }

        .card-pic {
          margin-top: 20%;
        }

        .item-text {
          font-size: 16px;
          color: #000;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .phone-valid {
      display: flex;
      flex-direction: column;
      padding: 20px;
      margin:0 20px;
      box-sizing: border-box;
      background-color: #fff;
      border-radius: 20px;
      box-shadow: 0 0 15px 10px rgba(255, 221, 223, .5);


      .second-form {
        display: flex;
        flex-direction: column;
      }

      .code-box {
        position: relative;

        .item-button {
          position: absolute;
          right: 0;
          background: none;
          border: none;
          color: #f03139;
        }
      }

    }

    .step1-bottom{
      display: flex;
      flex-direction: column;
      width: 100%;
      padding: 0 20px 20px 20px;
      justify-content: center;
      align-items: center;

    }
    .check-con {
      color: #999;
      margin: 10px 0 20px 5px;

      .agree {
        margin: 0 10px;
      }

      .link {

        color: #ee131b;
      }
    }

    .next-btn {
      width: 98%;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
      background-color: #ee131b;
      border-radius: 20px 20px 20px 20px;
      cursor: pointer;
    }
    //成功
    .success-con{
      margin-top: 15%;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .slogan{
        margin-top: 50px;
      }
      .center{
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .text{
        font-size: 18px;
        color: #000C3E;
        line-height: 41px;
      }
      .left-row {
        display: flex;
        margin: 20px 0;

        .img {
          width: 50px;
        }

        .text-box {
          margin-left: 20px;
          display: flex;
          flex-direction: column;
        }

        .big-text {
          font-size: 20px;
          font-weight: bold;
          margin-bottom: 20px;
          white-space: nowrap;
        }

        .s-text {
          font-size: 14px;
          color: #999;
          white-space: nowrap;
        }
      }
    }
  }
}
::v-deep {
  .inputFund input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
  }

  .inputFund input[type="number"] {
    -moz-appearance: textfield;
  }

  .el-input__inner {
    border-radius: 25px;
    background-color: #fff3f4;
  }
  .el-input.is-disabled .el-input__inner{
    background-color: #fff3f4;
  }
}
</style>